import React, { PureComponent } from 'react';
import { Form, Input, Button, Steps, Tree } from 'antd';
import Grid from '@/components/Grid';
import Dialog from '@/components/Dialog';
import Layout from '@/components/Layout';

const ModelForm = () => (
  <React.Fragment>
    <Steps labelPlacement="vertical" current={1}>
      <Steps.Step title="Finished" />
      <Steps.Step title="In Progress" />
      <Steps.Step title="Waiting" />
    </Steps>
    <Form layout="vertical">
      <Form.Item label="名称">
        <Input placeholder="请输入名称" />
      </Form.Item>
      <Form.Item label="备注">
        <Input.TextArea rows={8} placeholder="请输入至少五个字符" />
      </Form.Item>
    </Form>
  </React.Fragment>
);

const renderTreeNodes = (data = []) =>
  data.map(item => {
    if (item.items) {
      return (
        <Tree.TreeNode title={item.text} key={item.id} dataRef={item}>
          {renderTreeNodes(item.items)}
        </Tree.TreeNode>
      );
    }
    return <Tree.TreeNode {...item} title={item.text} key={item.id} dataRef={item} />;
  });

class DemoPage extends PureComponent {
  columns = [
    {
      title: '列名',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '创建时间',
      dataIndex: 'crtime',
      width: 200,
      align: 'center',
    },
  ];
  data = [
    {
      id: 1,
      name: '测试数据',
      crtime: '2019-07-30 10:30:10',
    },
  ];
  componentDidMount() {}
  handleState = e => {
    Dialog.open({
      title: '新建表单',
      fixed: true,
      component: ModelForm,
    });
  };
  handleStep = e => {
    Dialog.open({
      title: '第一步',
      fixed: true,
      okText: '下一步',
      component: ModelForm,
      onOk: ({ resolve }) => {
        resolve();

        Dialog.open({
          title: '第二步',
          url: 'rest/submit',
          fixed: true,
          width: 720,
          cancelText: '上一步',
          onCancelClick: (e, close) => {
            close();
            this.handleStep();
          },
          okText: '提交保存',
          component: ModelForm,
          onOk: data => {},
        });
      },
    });
  };
  render() {
    const treeData = [
      {
        id: 1,
        text: '测试机构',
        items: [
          {
            id: 11,
            text: '分支机构',
          },
        ],
      },
    ];
    return (
      <Layout
        side={{
          width: 300,
          component: (
            <Tree defaultExpandAll rowKey={record => record.id}>
              {renderTreeNodes(treeData)}
            </Tree>
          ),
        }}
      >
        <Layout
          toolbar={{
            left: (
              <React.Fragment>
                <Button type="primary" onClick={this.handleState}>
                  流程弹窗
                </Button>
                <Button onClick={this.handleStep}>流程分布</Button>
              </React.Fragment>
            ),
            right: (
              <Form layout="inline">
                <Input.Search placeholder="请输入要查询的关键词" />
              </Form>
            ),
          }}
        >
          <Grid
            selectedRows={[]}
            columns={this.columns}
            data={this.data}
            pagination={{
              pageNumber: 20,
              total: 300,
            }}
          />
        </Layout>
      </Layout>
    );
  }
}

export default DemoPage;
